<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>图片瀑布流布局_月落沉沉</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="./jquery-1.8.3.js"></script>

    <style>
      html,
      body {
        background-color: rgb(192, 242, 233);
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
        opacity: 1;
        animation: page-fade-in 0.1s forwards;
      }

      @keyframes page-fade-in {
        0% {
          opacity: 0.9;
        }

        100% {
          opacity: 1;
        }
      }

      #imgContain {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.5% solid;
        border-image: url("./border.jpg") 50 round;
        border-image-width: 0.5%;
      }

      #imgContain > ul {
        padding: 0;
        margin: 0;
        width: 99%;
        display: flex;
        justify-content: space-between;
        margin-top: 1%;
        margin-bottom: 1%;
      }

      #imgContain > ul > li {
        list-style: none;
        float: left;
        padding: 0;
        margin: 0;
      }

      #imgContain > ul > li > div {
        color: rgb(236, 11, 236);
        font-size: 12px;
        text-align: center;
      }

      #imgPreview {
        max-width: 800px;
        max-height: 600px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 水平垂直都居中 */
        border: 2px solid rgb(255, 119, 157);
      }

      #loadInfo {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      #loadDesc {
        color: rgb(236, 11, 236);
        font-size: 15px;
        text-align: center;
      }
      #loadImg {
        width: 50px;
        height: 50px;
        background-image: url("./loading.gif");
        background-size: 100% 100%;
      }

      #head,
      #footer {
        width: 100%;
        height: 30px;
        margin: 20px auto;
        padding: 0;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
      }

      #head li,
      #footer li {
        list-style: none;
        float: left;
        margin-right: 30px;
        font-size: 15px;
        color: gray;
      }
    </style>
  </head>
  <body>
    <div>
      <div id="head">
        <ul id="ulStyle">
          <li>月落沉沉</li>
          <li>QQ:764076169</li>
          <li>
            <a href="http://www.lsummer.cn/" target="_black">主页样例:http://www.lsummer.cn/</a>
          </li>
          <li>
            <a href="http://www.lsummer.cn/yueluo_web_html/navitem/nav_item_3.html" target="_black">图片瀑布流布局子页样例:http://www.lsummer.cn/yueluo_web_html/navitem/nav_item_3.html</a>
          </li>
        </ul>
      </div>
      <div id="imgContain"></div>
      <img id="imgPreview" />
    </div>
    <div id="loadInfo">
      <div id="loadDesc">图片正在加载中,点击图片可放大查看</div>
      <div id="loadImg"></div>
    </div>
    <div id="footer">
      <ul id="ulStyle">
        <li>月落沉沉</li>
        <li>QQ:764076169</li>
        <li>
          <a href="http://www.lsummer.cn/" target="_black">主页样例:http://www.lsummer.cn/</a>
        </li>
        <li>
          <a href="http://www.lsummer.cn/yueluo_web_html/navitem/nav_item_3.html" target="_black">图片瀑布流布局子页样例:http://www.lsummer.cn/yueluo_web_html/navitem/nav_item_3.html</a>
        </li>
      </ul>
    </div>

    <!-- 4.加载图片 -->
    <script type="text/javascript">
      function showImg() {
        const COLUMN = 5; // 列li
        let arr = []; // 存储列li
        let minHeight = []; // 存储列的高度
        let imgWidth; // 图片宽度
        let liMargin; // 列li间距
        const headDiv = document.getElementById("head");
        const imgPreviewDiv = document.getElementById("imgPreview");
        const loadInfoDiv = document.getElementById("loadInfo");

        create();

        function create() {
          // 创建ul li作为每一列的容器
          imgWidth = 99 / COLUMN;
          liMargin = 1 / (COLUMN - 1);

          var ulDiv = document.querySelector("#imgContain>ul");
          var imgContainDiv = document.getElementById("imgContain");
          var node = document.createElement("ul");

          imgContainDiv.appendChild(node);

          if (ulDiv != null) {
            imgContainDiv.removeChild(ulDiv);
          }

          for (let i = 0; i < COLUMN; i++) {
            var li = document.createElement("li");
            node.appendChild(li);
            li.style.width = imgWidth + "%";

            if (i == 0 || i == COLUMN - 1) {
              li.style.margin = 0;
            } else {
              if (i == COLUMN - 2) {
                li.style.marginLeft = liMargin + "%";
                li.style.marginRight = liMargin + "%";
              } else {
                li.style.marginLeft = liMargin + "%";
              }
            }

            arr.push(li);
            minHeight.push(0);
          }
          createImg();
        }

        function createImg() {
          let img = new Image();
          img.style.borderRadius = "5px";
          img.num = 1;
          img.src = `./img/${img.num}.jpg`; // 素材图片的规律为 2.jpg 3.jpg 4.jpg ...
          img.style.width = "100%";
          img.style.display = "block";
          // 当图片加载完后
          img.onload = loadHandler;
        }

        function loadHandler() {
          // 高度数组的最小值
          let min = Math.min(...minHeight);
          // 高度数组的最小值索引
          let minIndex = minHeight.indexOf(min);
          // 克隆一份图片
          let image = this.cloneNode(true);
          // 将图片加入对应最小值索引的容器中
          arr[minIndex].appendChild(image);
          var imgDesc = document.createElement("div");
          arr[minIndex].appendChild(imgDesc);
          imgDesc.innerHTML = "图片id:" + this.num + "&nbsp;&nbsp;&nbsp;原图像素:" + this.width + "x" + this.height;
          imgDesc.style.marginBottom = "5px";
          // 更新最小值索引的容器的高度
          minHeight[minIndex] += image.getBoundingClientRect().height + imgDesc.getBoundingClientRect().height;
          this.num++;

          // 图片最多展示20行
          // if (this.num > COLUMN * 20 + 1) {
          //   this.onload = null;
          //   return;
          // }

          //加载动画结束
          if (this.num > 50) {
            loadInfoDiv.style.display = "none";
          }

          this.src = `./img/${this.num}.jpg`;

          imgPreviewDiv.style.display = "none";

          image.onclick = function () {
            imgPreviewDiv.src = this.src;
            imgPreviewDiv.style.display = "";
          };

          imgPreviewDiv.onclick = function () {
            imgPreviewDiv.src = "";
            imgPreviewDiv.style.display = "none";
          };
        }
      }

      showImg();

      window.addEventListener("resize", showImg);
    </script>
  </body>
</html>
